<template>
  <div>
    <el-form
      ref="searchRef"
      :model="searchForm"
      :inline="true"
    >
      <el-form-item>
        <el-input
          v-model="searchForm.name"
          placeholder="请输入昵称"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="onSearch(searchRef)"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-main class="ea-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="头像"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-avatar
              :size="30"
              :src="scope.row.avatar"
              @error="() => true"
            >
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="昵称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="alias"
          label="备注"
          width="140"
          align="center"
        />
        <el-table-column
          prop="name"
          label="性别"
          width="100"
          align="center"
        >
          <template #default="scope">
            <div>{{ scope.row.gender ? '男' : '女' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="weixin"
          label="微信"
          width="150"
          align="center"
        />
        <el-table-column
          prop="province"
          label="地区"
          align="center"
        />
        <el-table-column
          prop="address"
          label="操作"
          fixed="right"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="openSendMsg(scope.row)"
            >
              发消息
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <div class="page">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :background="true"
        layout="prev, pager, next, jumper"
        :total="pageTotal"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog
    v-model="dialogMsgVisible"
    :title="`发消息给：${currentRow.name}`"
    width="500"
  >
    <el-form
      ref="formMsgRef"
      :model="msgFormData"
      :rules="msgRules"
    >
      <el-form-item
        label="内容:"
        prop="content"
      >
        <el-input
          v-model="msgFormData.content"
          placeholder="请输入"
          type="textarea"
          :autosize="{ minRows: 4 }"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="sendConfirm(formMsgRef)"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="js">
import { userStore } from '@/stores'
import { onMounted, reactive, ref } from 'vue'
import { getList, friendSay } from '@/apis/myfriend'
import { ElMessage } from 'element-plus'

const user = userStore()

const searchForm = reactive({
  name: ''
})
const searchRef = ref()
const searchVal = ref()
const tableData = ref([])
const currentRow = ref({})

const currentPage = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)

const formMsgRef = ref()
const dialogMsgVisible = ref(false)

const msgFormData = reactive({
  content: ''
})
const msgRules = reactive({
  content: [{ required: true, message: '请输入', trigger: 'blur' }]
})

onMounted(() => {
  if (user.robotId) {
    getList({ search$$robotId$$: user.robotId }).then(res => {
      tableData.value = res.data.list || []
      pageTotal.value = res.data.total
    })
  }
})

const onSearch = (formEl) => {
  if (!formEl) return
  const params = {
    search$$robotId$$: user.robotId
  }
  formEl.validate((valid) => {
    if (valid) {
      const val = searchForm.name
      if (val) {
        params.search$$name$$all = val
        searchVal.value = val
      }
      getList(params).then(res => {
        tableData.value = res.data.list || []
        pageTotal.value = res.data.total
      })
    }
  })
}

const handleCurrentChange = (val) => {
  const params = {
    search$$robotId$$: user.robotId,
    search$$name$$all: searchVal.value,
    page: val
  }
  getList(params).then(res => {
    tableData.value = res.data.list || []
    pageTotal.value = res.data.total
  })
}

const openSendMsg = (row) => {
  currentRow.value = row
  dialogMsgVisible.value = true
}

const sendConfirm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const id = currentRow.value.id
      const name = currentRow.value.name
      const content = msgFormData.content
      friendSay({ id, name, content }).then(res => {
        dialogMsgVisible.value = false
        msgFormData.content = ''
        res.success && ElMessage({
          message: '操作成功！',
          type: 'success'
        })
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.page{
  background: #FFFFFF;
  padding: 0px 10px 10px 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
